<template>
  <div class="login-wrap">
    <div class="login-content">
      <div class="login-aside">
        <div class="logo">腾达旅行</div>
        <div class="bio">
          <div>
            <i class="el-icon-check"></i>
            <span>领先的云计算服务平台</span>
          </div>
          <div>
            <i class="el-icon-check"></i>
            <span>全自动化订单处理</span>
          </div>
          <div>
            <i class="el-icon-check"></i>
            <span>简易的系统集成对接方式</span>
          </div>
        </div>
      </div>
      <div class="login-panel">
        <div class="login-box">
          <div class="login-box-title">邮箱登录</div>
          <div class="login-box-form">
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px">
              <div v-if="reason" class="failed">
                <i class="el-icon-warning"></i>
                <span>{{reason}}</span>
              </div>
              <el-form-item prop="username">
                <el-input v-model="loginForm.username" placeholder="登录邮箱地址" />
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" placeholder="登录密码" @keyup.enter.native="login()" />
              </el-form-item>
              <div class="login-btn">
                <el-button type="primary" :loading="loading" @click="login()">登录</el-button>
              </div>
            </el-form>
            <div class="register">还没有账号？ <router-link to="/register">现在注册</router-link></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "./static/css/login.scss";
</style>

<script>
import * as types from '@/store/mutation-types'

export default {
  data: function () {
    return {
      reason: '',
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    login(formName) {
      const self = this
      self.$refs['loginForm'].validate((valid) => {
        if (valid) {
          self.loading = true
          self.$store.dispatch(types.LOGIN, self.loginForm)
            .then(() => {
              self.loading = false
              self.$router.push(self.$route.query.success || '/item/usj/list')
            }).catch(error => {
              self.loading = false
              self.reason = error.data.message
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
